<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      :show-close="false"
      width="600px"
    >
      <el-form
        ref="videoDialog"
        :model="row"
        :rules="rules"
        label-width="120px"
        :disabled="row.state === 1"
      >
        <el-form-item label="视频标题:" prop="title" style="width: 350px;">
          <el-input
            v-model="row.title"
            size="medium"
            placeholder="请输入视频标题"
          />
        </el-form-item>
        <el-form-item v-if="row.state !== 1" label="封面图片：" prop="img">
          <upload-cover-img
            :folder="folder"
            :row="row"
            @upload-success="handleUpload"
          />
          <div style="color: red;">提示：请上传 大小小于500kb，长为330px宽为220px 的图片!</div>
        </el-form-item>
        <el-form-item v-if="row.state === 1" label="封面图片：" prop="img">
          <img
            :src="row.host+row.img"
            class="video-img"
          >
        </el-form-item>
        <el-form-item label="视频上传链接:" prop="url" style="width: 450px;">
          <el-input
            v-model="row.url"
            size="medium"
            placeholder="请输入上传链接(200字符以内)"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          @click="handleCancel"
        >
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadCoverImg from '@/components/UploadCoverImg'

export default {
  name: 'VideoDialog',
  components: {
    UploadCoverImg
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '',
      folder: 'video',
      rules: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '视频上传链接不能为空',
            trigger: 'blur'
          },
          {
            max: 200,
            message: '长度必须小于200 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  updated() {
    if (this.row.id) {
      this.title = '编辑视频'
    } else {
      this.title = '新增视频'
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel-dialog')
      this.$refs.videoDialog.resetFields()
    },
    handleConfirm() {
      this.$refs.videoDialog.validate((valid) => {
        if (valid) {
          this.$emit('confirm-dialog', {
            // dialog: this.$refs.videoDialog,
            id: this.row.id,
            title: this.row.title,
            img: this.row.img,
            url: this.row.url
          })
        } else {
          return false
        }
      })
    },
    handleUpload(url) {
      this.row.img = url
    }
  }
}
</script>

<style scoped>
  .video-img {
    width: 330px;
    height: 220px;
    border: 1px dashed #ddd
  }
</style>
